<template>
	<view class="content">
		<view class="header" :style="{backgroundColor:`rgba(231, 231, 231,${transparency})`}">
			<view class="" :style="{height: statusbarHeight+'px'}">
			</view>
			<view class="flex">
				<view class="round" @click="getback" :style="{backgroundColor:`rgba(231, 231, 231,${1-transparency})`}">
					<uni-icons size="24" type="arrowleft" />
				</view>
				<view class="nav">
					<view class="navitem" v-for="(item,index) in nav_list" :key=index @click="changNavId(item)" :style="{color:nav_id!=item.id ? `rgba(25, 25, 25,${transparency})` 
					: `rgba(0, 108, 265,${transparency})`  }">
						{{item.text}}
					</view>
				</view>
				<view class="round">
				</view>
			</view>
		</view>
		<scroll-view scroll-y=true style="height: 100vh;" @scroll="scroll" :scroll-top="scrollTop"
			:scroll-into-view="scrollId" scroll-with-animation="true">
			<!-- 商品 -->
			<view class="commodity">
				<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#666" circular
					indicator-dots="true">
					<swiper-item v-for="(item,index) in albums" :key="index" @click="previewImg(index)">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="assure">
					<text class="yzb yzb-anquan"></text>
					<text class="assure-info">平台护航 · 服务保障 · 资费透明 · 隐私保障</text>
				</view>
			</view>

			<view class="base-info">
				<view class="row space-between-algin">
					<view class="row align-height">
						<text class="name">{{detail.name}}</text>
						<view class="tip" :class="level[1]">
							<text class="tip-icon yzb yzb-jiangli-"></text>
							<text class="tip-name">{{levelName[detail.level]}}</text>
						</view>
					</view>
					<view class="price">
						<text class="unit">¥</text>
						<text class="number">{{detail.price}}</text>
						<text class="unit">/次</text>
					</view>
				</view>
				<text class="title">{{detail.title}}</text>
				<view class="row space-between-algin align-height">
					<!-- <view class="onoff">
						<text>线上</text><text>线下</text>
					</view> -->
					<view class="location">
						<!-- <text class="yzb yzb-location"></text> -->
						<!-- <text class="city">广东省深圳市南山区</text> -->
						<text class="city">单次服务时长最多50分钟，超过则需要再次下单继续服务~</text>
					</view>
				</view>
			</view>

			<view class="exp row align-height">
				<view class="exp-item border-right">
					<view class="exp-info align-bottom">
						<text class="exp-number">{{detail.serviceNum}}+</text>
						<text class="exp-normal">人次</text>
					</view>
					<text class="exp-title">咨询人次</text>
				</view>
				<view class="exp-item border-right">
					<view class="exp-info align-bottom">
						<text class="exp-number">{{detail.serviceDuration}}</text>
						<text class="exp-normal">分钟</text>
					</view>
					<text class="exp-title">服务时长</text>
				</view>
				<view class="exp-item">
					<view class="exp-info align-bottom">
						<text class="exp-number">{{detail.serviceTime}}</text>
						<text class="exp-normal">年</text>
						<text class="exp-number">{{detail.month}}</text>
						<text class="exp-normal">月</text>
					</view>
					<text class="exp-title">从业年限</text>
				</view>
			</view>
			<!-- 详情 -->
			<view class="nav-title">
				<text class="yzb yzb-x-"></text>
				<text class="title">个人简介</text>
			</view>
			<view class="details box" :id="'scrollView'+nav_list[0].id">
				<view class="column">
					<text class="details-title">资质证书</text>
					<text class="details-content">{{detail.certificate}}</text>
				</view>
				<view class="column">
					<text class="details-title">擅长领域</text>
					<text class="details-content">{{detail.fields}}</text>
				</view>
				<view class="column">
					<text class="details-title">个人介绍</text>
					<!-- <text class="details-content">
						{{detail.brief}}
					</text> -->
					<rich-text v-if="detail.brief" style="word-wrap: break-word;word-break: break-all;" space="nbsp"
						:nodes="detail.brief"></rich-text>
					<text v-else style="padding: 30upx 20upx;">无</text>
				</view>
			</view>
			<!-- 评价 -->
			<!-- <view class="nav-title">
				<text class="yzb yzb-x-"></text>
				<text class="title">咨询评价</text>
			</view>
			<view class="evaluate box" :id="'scrollView'+nav_list[1].id">
				<yzb-comment :list="recommendList"></yzb-comment>
				<view class="evaluate-more">
					<text class="more-comment">更多评价</text>
					<text class="yzb yzb-next"></text>
				</view>
			</view> -->
			<!-- 推荐 -->
			<view class="nav-title">
				<text class="yzb yzb-x-"></text>
				<text class="title">为您推荐</text>
			</view>
			<view class="recommend box2" :id="'scrollView'+nav_list[1].id">
				<yzb-plan :list="recommendList" @click="toDetail"></yzb-plan>
				<view class="load-more-box">
					<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
					<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
					<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
					<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false"
						@click="reLoad"></uni-load-more>
				</view>
			</view>
		</scroll-view>
		<view class="bottom" v-if="!hasLogin || userInfo.memberRole != 'planer'"><uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup"
				@click="onClick" @buttonClick="buttonClick" /></view>
		<!-- 支付弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content">
				<view class="top">
					<text class="title">预约咨询</text>
					<text class="close yzb yzb-shanchu" @click="closePop"></text>
				</view>
				<view class="buy-number">
					<view class="number-item">
						<text class="name">咨询节数</text>
						<text class="desc">单节{{detail.price}}元，时长60分钟</text>
					</view>
					<uni-number-box :min="1" :max="1" @change="numberChange" v-model="orderParams.number" />
				</view>
				<view class="pay-type">
					<text class="title">支付方式</text>
					<view class="pay-item" v-for="(item,index) in pays" :key="index" @click="selectPayType(index,item)">
						<view class="left">
							<image :src="item.icon"></image>
							<text>{{item.title}}</text>
						</view>
						<text class="right yzb  "
							:class="item.selected?'yzb-yuanxingxuanzhongfill':'yzb-yuanxingweixuanzhong'"></text>
					</view>
				</view>
				<view class="popup-bottom">
					<view class="amount">
						<text>¥</text>
						<text>{{orderParams.money}}</text>
					</view>
					<text class="btn" @click="toPay">去支付</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				list: [],
				statusbarHeight: uni.getSystemInfoSync().statusBarHeight, //刘海屏高度
				scrollTop: 0, //设置竖向滚动条位置
				nav_list: [{
						id: 1,
						text: '简介',
						scrollId: "scrollView1"
					},
					// {
					// 	id: 2,
					// 	text: '评价',
					// 	scrollId: "scrollView2"
					// },
					{
						id: 2,
						text: '推荐',
						scrollId: "scrollView2"
					}
				],
				nav_id: null, //导航选中id
				scrollId: "",
				transparency: 0, //透明度
				isDropDown: false, //下拉到临界点
				//临界值(图片高度-头部高度-刘海屏高度 250-50-刘海屏高度) 
				criticalValue: 200 - uni.getSystemInfoSync().statusBarHeight,

				recommendList: [],
				status: '',
				albums: [],
				query: {
					page: 1,
					limit: 10,
					planType: '',
				},
				selectedPay: null,
				pays: [
					{
						payType:'jfPay',
						title: '积分支付(1:1)',
						icon: '../../static/kp/jf.png',
						selected: true,
						active: true,
					},
					// #ifndef MP-WEIXIN
					{
						payType: 'aliPay',
						title: '支付宝支付',
						icon: '../../static/kp/zfb.png',
						selected: false,
						active: false,
					},
					// #endif 
					{
						payType: "wxPay",
						title: '微信支付',
						icon: '../../static/kp/wx.png',
						selected: false,
						active: false,
					},
				],

				detail: {},
				orderParams:{
					planerId:'',
					number:1,
					payType:'jfPay',
					money:0,
				},
				canChat:false,
				
				level: [
					"level0",
					"level1",
					"level2",
				],
				levelName: [
					"新手",
					"成熟",
					"资深",
				],

				options: [{
						icon: 'home',
						text: '首页',
						color: '#646566'
					},
					// {
					// 	icon: 'redo',
					// 	text: '分享',
					// 	color: '#646566'
					// },
				],
				customButtonGroup: [{
					text: '预约咨询',
					backgroundColor: 'linear-gradient(90deg, #f0ad4e, #FE6035)',//linear-gradient(90deg, #f0ad4e, #FE6035)   linear-gradient(90deg, #1E83FF, #12ae85)
					color: '#fff'
				}, ],
			}
		},

		onLoad(options) {
			console.log("options==", options);
			this.orderParams.planerId=options.id;
			this.getPlanerDetail(options.id);
		},

		onReachBottom() {
			console.log("getPlanerList");
			this.getPlanerList("add");
		},

		methods: {
			...mapMutations(['SET_ACTIVE']),

			async getPlanerDetail(id) {
				let param={
					id:id,
					userId:"",
				}
				if(this.hasLogin){
					param.userId=this.userInfo.id
				}
				let res = await this.$apis.getPlanerDetail({
					id: id
				});
				console.log("===getPlanerDetail==", res);
				this.detail = res;
				if (res.album) {
					this.albums = res.album.split(",");
				}
				if(res.canChat){
					this.customButtonGroup[0].text="开始咨询";
					this.customButtonGroup[0].backgroundColor = 'linear-gradient(90deg, #1E83FF, #12ae85)';
				}
				this.query.planType = res.planType;
				this.query.id = id;
				this.orderParams.money=res.price;
				this.getPlanerList();
			},

			async getPlanerList(type = 'refresh') {
				this.status = '请求中';
				if (type == 'refresh') {
					this.query.page = 1;
				} else {
					this.query.page++;
				}
				let res = await this.$apis.getPlanerList(this.query);
				if (res) {
					console.log("getPlanerList=res===", res)
					let data = res.records;
					if (this.query.page == 1) {
						this.recommendList = [];
					}
					this.recommendList = this.recommendList.concat(data || []);
					this.changeStatus(res);
				}
			},

			// 修改请求状态
			changeStatus(data) {
				if (this.list.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.page >= Math.ceil(data.total / this.query.limit)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},

			onClick(e) {
				console.log("==onClick===", e);
				if (e.index == 0) {
					//首页
					console.log('跳转首页');
					this.SET_ACTIVE("home")
					this.$mRouter.switchTab({
						route: this.$mRoutesConfig.index,
					});
					// uni.switchTab({
					//   url: this.$mRoutesConfig.index,
					//   success: () => {
					//     // 切换后重新设置，因为不在在触发页面的created生命周期
					//     this.SET_ACTIVE("home")
					//   }
					// })
				} else if (e.index == 1) {}
			},

			buttonClick(val) {
				if(!this.hasLogin){
					this.$mRouter.push({
						route: this.$mRoutesConfig.login
					});
					return;
				}
				console.log("==buttonClick===", val);
				if(val.content.text=="开始咨询"){
					//在线聊聊
					this.toChat();
				}else{
					this.$refs.popup.open("bottom")
				}
			},
			
			toChat() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.planChat,
					query: {
						memberId: this.detail.memberId,
						role:"member"
					}
				});
			},
			
			selectPayType(index, item) {
				if (item.active == false) {
					uni.showToast({
						icon: 'none',
						title: "暂不支持"
					})
					return;
				}
				for (var i = 0; i < this.pays.length; i++) {
					this.pays[i].selected = false;
				}
				this.pays[index].selected = true;
				this.orderParams.payType=item.payType;
			},

			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			
			numberChange(e){
				this.orderParams.number=e;
				this.orderParams.money=this.orderParams.number * this.detail.price;
			},
			
			closePop(){
				this.$refs.popup.close();
			},
			
			toPay(){
				let that=this;
				uni.showModal({
					title: '温馨提示',
					content: '确定去支付？',
					success(res) {
						if (res.confirm) {
							that.closePop();
							that.doPay();
						}
					}
				});
			},
			
			async doPay(){
				console.log("params==",this.orderParams);
				let res = await this.$apis.createPlanPay(this.orderParams);
				console.log("res====",res);
				if (res) {
					uni.showToast({
						icon:'none',
						title:res
					})
					this.canChat=true;
					this.customButtonGroup[0].text="开始咨询";
					this.customButtonGroup[0].backgroundColor = 'linear-gradient(90deg, #1E83FF, #12ae85)';
				}
			},

			toDetail(item) {
				this.$mRouter.push({
					route: this.$mRoutesConfig.planer,
					query: {
						id: item.id
					}
				});
			},

			// 查看图片
			previewImg(index) {
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: this.albums[index],
					urls: this.albums
				});
			},

			//scroll-view滚动触发
			scroll(e) {
				const scrollTop = e.detail.scrollTop
				this.calcSize()
				const tabs = this.nav_list.filter(item => item.top <= scrollTop).reverse();
				if (tabs.length > 0) {
					this.nav_id = tabs[0].id;
				}
				this.transparency = e.detail.scrollTop / this.criticalValue
				if (!this.isDropDown && e.detail.scrollTop >= this.criticalValue) {
					this.isDropDown = true
				} else if (this.isDropDown && e.detail.scrollTop < this.criticalValue) {
					this.isDropDown = false
					this.nav_id = null
				}
			},
			//计算高度
			calcSize(event) {
				let h = 0;
				this.nav_list.forEach(item => {
					let view = uni.createSelectorQuery().select(`#${item.scrollId}`);

					view.fields({
						size: true
					}, data => {

						if (data != null) {

							//加上图片高度 -(header+刘海屏)高度 +margin高度
							item.top = h + 250 - 50 - uni.getSystemInfoSync().statusBarHeight + 10 * item
								.id;
							h += data.height
							item.bottom = h;
						}

					}).exec();
				})

			},
			//点击头部标题
			changNavId(item) {
				if (!this.isDropDown) return
				this.nav_id = item.id
				//scroll-into-view滚动到指定view会有头部高度的误差 用scroll-top来取代
				// this.scrollId = item.scrollId
				this.nav_list.forEach(n => {
					if (n.id == item.id) {
						this.scrollTop = String(item.top)
					}

				})
			},
			//返回
			getback() {
				uni.navigateBack()
			},
			//分享
			share() {
				uni.showToast({
					title: '分享',
					icon: 'none',
					duration: 2000
				})
			},
		}

	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	
	view{
		box-sizing: border-box;
	}
	
	.content {
		padding-bottom: 100upx;
	}

	.header {

		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;

		.flex {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			width: 100%;
			height: 100rpx;

		}

		.nav {
			display: flex;
			align-items: center;

			.navitem {
				margin-left: 30px;
				font-size: 30rpx;
			}

			.navitem:first-child {
				margin-left: 0;
			}
		}

		.round {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;

			width: 70rpx;
			height: 70rpx;
		}
	}

	.commodity {
		width: 100%;
		height: 500rpx;
		position: relative;

		.swiper {
			width: 100%;
			height: 500rpx;
		}

		image {
			width: 100%;
			height: 500rpx;

		}

		.assure {
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			bottom: -60upx;
			position: absolute;
			width: 100%;
			padding: 10upx;
			align-items: center;
			display: flex;
			justify-content: center;
			background: rgba(232, 233, 253, 1);

			.yzb {
				color: #6B84E5;
			}

			.assure-info {
				color: #6B84E5;
			}
		}
	}

	.box {
		// margin-top: 20rpx;
		width: calc(100% - 20rpx);
		margin-left: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		// height: 1000px;
		box-sizing: border-box;
	}

	.box2 {
		// margin-top: 20rpx;
		width: calc(100% - 20rpx);
		margin-left: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		// height: 1000px;
		box-sizing: border-box;
	}

	.base-info {
		margin-top: 60upx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20upx;

		.name {
			font-weight: bold;
			font-size: 34upx;
		}

		.tip {
			margin-left: 10upx;
			border-radius: 22upx;
			height: 44upx;
			padding: 0 15upx;
			line-height: 44upx;

			text {
				font-size: 24upx;
			}

			.tip-name {
				margin-left: 3upx;
			}
		}

		.level2 {
			background-color: #F4E290;

			text {
				color: #A67B22;
			}
		}

		.level1 {
			background-color: #F1DDD0;

			text {
				color: #887765;
			}
		}

		.level0 {
			background-color: #E5EAFE;

			text {
				color: #70829A;
			}
		}

		.price {
			text {
				color: #ff201f;
			}

			.unit {}

			.number {
				font-weight: bold;
				font-size: 36upx;
				margin-right: 10upx;
			}
		}

		.title {
			font-size: 26upx;
			color: #666;
			padding: 10upx 0;
		}

		.onoff {
			flex-wrap: wrap;

			text {
				font-size: 24upx;
				padding: 5upx 10upx;
				margin-right: 15upx;
				background-color: #F1F3FF;
				border-radius: 8upx;
				color: #333;
			}
		}

		.location {
			text {
				color: #999;
				font-size: 24upx;
			}

			.city {
				margin-left: 5upx;
			}
		}
	}

	.exp {
		background-color: #fff;
		box-sizing: border-box;
		padding: 20upx;
		border-top: 1upx solid #F8f8f8;

		.border-right {
			border-right: #eee 1upx solid;
		}

		.exp-item {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.exp-number {
				font-weight: bold;
				font-size: 34upx;
			}

			.exp-normal {
				font-size: 26upx;
			}

			.exp-title {
				color: #999;
				font-size: 26upx;
				text-align: center;
			}

			.exp-info {
				display: flex;
				justify-content: center;
			}
		}
	}

	.nav-title {
		padding: 15upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.yzb {
			font-size: 36upx;
			color: #666;
			margin-right: 10upx;
		}

		.title {
			text-align: center;
			font-weight: bold;
			font-size: 32upx;
		}
	}

	.details {

		.details-title {
			font-weight: bold;
			font-size: 34upx;
			padding: 20upx 0 10upx 0;
		}

		.details-content {
			font-weight: 28upx;
			color: #666;
		}
	}

	.evaluate {

		.evaluate-more {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 20upx 0;

			.more-comment {
				font-size: 26upx;
				color: $main-color;
				margin-right: 20upx;
			}

			.yzb {
				font-size: 26upx;
				color: $main-color;
			}
		}
	}


	.recommend {}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 10upx 0;
		background-color: $bgcolor_white;
		border-top: 1upx solid $border-color-base;
	}

	.popup-content {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		box-sizing: border-box;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		
		.top{
			width: 100%;
			border-bottom: 20upx solid #eee;
			padding: 20upx 0;
			align-items: center;
			display: flex;
			justify-content: center;
			.title{
				font-size: 34upx;
				font-weight: bold;
			}
			
			.close{
				position: absolute;
				right: 30upx;
				font-size: 44upx;
			}
		}
		
		.buy-number{
			display: flex;
			width: 100%;
			flex-direction: row;
			align-items: center;
			padding: 20upx;
			box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 20upx solid #eee;
			
			.number-item{
				display: flex;
				flex-direction: column;
				
				.name{
					font-size: 30upx;
					font-weight: bold;
				}
				
				.desc{
					font-size: 28upx;
					color: #666;
				}
				
			}
		}
		
		.pay-type {
			width: 100%;
			background-color: #fff;
			margin: 30upx 20upx;
			padding: 20upx;
			border-radius: 20upx;
			
			.title{
				font-size:30upx;
				font-weight:bold;
			}
		
			.pay-item {
				padding: 15upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
		
				.left {
					display: flex;
					flex-direction: row;
					align-items: center;
		
					image {
						width: 45upx;
						height: 45upx;
					}
		
					text {
						margin-left: 15upx;
						color: #333;
					}
				}
		
				.right {
					font-size: 44upx;
					color: #666;
				}
		
				.yzb-yuanxingxuanzhongfill {
					color: #12ae85;
				}
		
				.yzb-yuanxingweixuanzhong {
					color: #999;
				}
		
			}
		}
		
		.popup-bottom{
			width: 100%;
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 20upx;
			border-top: 20upx solid #eee;
			
			.amount{
				
				text{
					color: $font-color-orange;
				}
				
				:nth-child(1){
					font-size: 30upx;
				}
				
				:nth-child(2){
					font-size: 40upx;
				}
			
			}
			
			.btn{
				height: 60upx;
				line-height: 60upx;
				background-color: $main-color;
				color: #fff;
				font-size: 32upx;
				font-weight: bold;
				border-radius: 30upx;
				padding: 0 40upx;
			}
		}
	}
</style>